<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="box">
    <div class="text1">hello</div>
    <div class="text2">word</div>
  </div>
  <!-- 当不涉及到筛选,排序,增加,删除功能的时候,key有没有无所谓,因为之后该列表就不会改变了,当列表需要改变时,就要吧key值设置为合理的id值 -->
  <script>
    let obj = {
      type: "div",
      props: {
        id: "box",
      },
      chlidren: [
        {
          type: "div",
          props: {
            class: "text1",
          },
          chlidren: "htllo",
        },
        {
          type: "div",
          props: {
            class: "text2",
          },
          chlidren: "word",
        },
      ],
    };
  </script>
</body>

</html>